<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #div_1{
            display: flex;
            background-color: gray;
            justify-content: space-between;
            align-items: center;
            font-family: fangsong;
            margin: 10px,0;
        }
        a{
            text-decoration: none;
        }
        #div_2{
            display: flex;
            justify-content: space-between;
            margin: 10px,0;
            align-items: center;
        }
        #div_3 {
            width: 100%;
            margin: 20px 0;
        }
        table {
            width: 100%;
            border-collapse: collapse;
        }
        th, td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: center;
        }
        th {
            background-color: #f2f2f2;
        }
        .footer{
            max-width: 100%;
            height: 100px;
            background-color: rgb(193, 204, 193);
            text-align: center;
            
        }
        #div {
            margin: 0px auto;
        }
    </style>
</head>
<body>
    <div id="div">
        <div id="div_1">
            <h1>学生管理系统</h1>
            <div>
                <a href="\exit">退出</a>
                <a href="\load">登录</a>
            </div>
        </div>
        <div id="div_2">
            
            <form method="get">
                <label>姓名： <input type="text" name="name" v-model="text.name"></label>
                <label>职位： <select name="position" v-model="text.posistion">
                                <option value="0">职位</option>
                                <option value="1">教务处主任</option>
                                <option value="2">老师</option>
                                <option value="3">校长</option>
                                <option value="4">学生</option>
                              </select>
                </label>
                <label>年龄：<input name="age" v-model="text.age"></label>
                <label>学号：<input type="text" v-model="text.id"></label>
                <span >
                    <button v-on:click="clear">查询</button>
                    <button v-on:click="put">清空</button>
                </span>
            </form>
        </div>
        <div id="div_3">
            <table>
                <thead>
                    <th>学号</th>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>职位</th>
                </thead>
                <tbody>
                    <tr v-for="(it, index) in list" :key="it.id">
                        <td>{{it.id}}</td>
                        <td>{{it.name}}</td>
                        <td>{{it.age}}</td>
                        <td>
                            <span v-if="it.posistion==1">教务处主任</span>
                            <span v-else-if="it.posistion==2">老师</span>
                            <span v-else-if="it.posistion==3">校长</span>
                            <span v-else-if="it.posistion==4">学生</span>
                        </td>
                    </tr>
                </tbody>
            </table>
            <footer class="footer">
                <p class="company-name">江苏传智播客教育科技股份有限公司</p>
                <p class="copyright">版权所有 Copyright 2006-2024 All Rights Reserved</p>
              </footer>
        </div>
    </div>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script type="module">
        import {createApp} from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
        
        createApp({
          data(){
            return {
              list:[
                {"name":"小白","posistion":1,"age":19,"id":"2024033499"},
                {"name":"小黑","posistion":2,"age":20,"id":"2024033500"},
                {"name":"小红","posistion":3,"age":21,"id":"2024033501"}
              ]
            }
          }
        }).mount("#div_3");
        createApp({
            data(){
                return {
                    text:{
                        name:"",
                        posistion:"",
                        age:"",
                        id:""
                    }
                }
            },
            methods:{
                clear(){
                    this.text={
                        name:"",
                        posistion:"",
                        age:"",
                        id:""
                    }
                },
                put(){
                    axios.get('https://web-server.itheima.net/emps/list?name=${this.text.name}&gender=${this.text.gender}&job=${this.text.posistion}').then(res => {
                            this.list = res.data.data;
                    })
                }
            },
            mounted() {
                this.put();
            }
        }).mount("#div_2")
    </script>
</body>
</html>
